<template>
  <transition name="mybox">
    <div
      v-show="schemePresetShow.show"
      style="width: 100%; height: 300px; overflow: auto"
    >
      <!-- <el-date-picker
        class="timePicker"
        v-model="searchData.topChartTime"
        format="YYYY-MM-DD HH:mm:ss"
        value-format="YYYY-MM-DD HH:mm:ss"
        size="small"
        :clearable="false"
        :editable="false"
        @change="mapInit"
        style="position: absolute; z-index: 999"
      /> -->
      <div id="map" style="width: 100%; min-width: 1622px; height: 100%"></div>
    </div>
  </transition>

  <div
    style="
      width: 100%;
      text-align: center;
      font-size: 20px;
      height: 20px;
      line-height: 20px;
    "
  >
    <CaretUpOutlined v-if="schemePresetShow.show" @click="treeHide" />
    <CaretDownOutlined v-else @click="treeShow" />
  </div>

  <el-tabs
    v-model="activeKey"
    @tab-click="tabsChange"
    :style="schemePresetShow"
  >
    <el-tab-pane name="1" label="泥沙预报" style="height: 90%">
      <el-row style="height: 100%">
        <el-col :span="2" style="overflow-y: auto; height: 100%">
          <a-tree
            v-model:selectedKeys="searchData.stcd"
            :tree-data="treeData"
            @select="stcdSelect"
          />
        </el-col>
        <el-col :span="15" style="height: 100%">
          <div style="text-align: center; margin-top: 15px">
            <span style="margin-left: 15px"> 选择时间：</span>
            <el-date-picker
              v-model="searchData.timeArr"
              value-format="YYYY-MM-DD"
              type="daterange"
              size="small"
              :clearable="false"
              :editable="false"
              show-time
            />
            <el-button
              type="primary"
              style="margin-left: 10px"
              @click="echartsSiteInit"
            >
              查询
            </el-button>
          </div>
          <div
            id="echartsD"
            ref="echarts"
            style="width: 100%; height: 95%; margin-top: 5px"
          ></div>
        </el-col>
        <el-col :span="7">
          <el-table
            :data="tableData.forecastData"
            rowKey="tm"
            border
            stripe
            max-height="600px"
            size="small"
            style="height: 100%"
          >
            <el-table-column label="时间" width="150" align="center">
              <template #default="scope">
                {{ filterTime(scope.row.time) }}
              </template>
            </el-table-column>
            <el-table-column prop="flow" label="流量(m³/s)" />
            <el-table-column prop="real" label="含沙量(m³/s)" />
            <el-table-column prop="yb" label="预测含沙量(m³/s)" />
          </el-table>
        </el-col>
      </el-row>
    </el-tab-pane>
    <el-tab-pane name="2" label="历史预报数据对比" style="height: 90%">
      <el-row style="height: 100%">
        <el-col :span="2" style="overflow-y: auto; height: 100%">
          <a-tree
            v-model:selectedKeys="searchData.stcd"
            :tree-data="treeData"
            @select="stcdSelect"
          />
        </el-col>
        <el-col
          :span="historyEchartsParam.span[0]"
          style="height: 100%; position: relative"
        >
          <div
            v-show="historyEchartsParam.show"
            style="height: 100%; width: 99%; float: left"
          >
            <div style="text-align: center; margin-top: 15px">
              <span style="margin-left: 15px"> 选择时间：</span>
              <el-date-picker
                v-model="searchData.timeArr"
                value-format="YYYY-MM-DD"
                type="daterange"
                size="small"
                :clearable="false"
                :editable="false"
                show-time
              />
              <el-button
                type="primary"
                style="margin-left: 10px"
                @click="historyInit"
              >
                查询
              </el-button>
            </div>
            <div
              id="echartsH"
              ref="echarts"
              style="width: 100%; height: 95%; margin-top: 5px"
            ></div>
          </div>

          <div
            style="
              position: absolute;
              right: 0;
              top: 50%;
              font-size: 40px;
              transform: translate(-50%, -50%);
            "
          >
            <CaretLeftOutlined
              v-if="historyEchartsParam.show"
              @click="historyEchartsHide"
            />
            <CaretRightOutlined v-else @click="historyEchartsShow" />
          </div>
        </el-col>
        <el-col :span="historyEchartsParam.span[1]">
          <el-table
            :data="tableData.history"
            max-height="600px"
            size="small"
            border
            stripe
            style="height: 100%"
          >
            <el-table-column
              v-for="item in historyColumns"
              :key="item.key"
              :prop="item.key"
              :label="item.title"
              :fixed="item.fixed"
              :width="item.width"
            />
          </el-table>
        </el-col>
      </el-row>
    </el-tab-pane>
    <!-- <el-tab-pane name="3" label="水位预报" style="height: 90%">
      <el-row style="height: 100%">
        <el-col :span="2" style="overflow-y: auto; height: 100%">
          <a-tree
            v-model:selectedKeys="searchDataSW.stcd"
            :tree-data="treeDataSW"
            @select="echartsInitSW"
          />
        </el-col>
        <el-col :span="15" style="height: 100%">
          <div style="text-align: center; margin-top: 15px">
            <span style="margin-left: 15px"> 选择时间：</span>
            <el-date-picker
              v-model="searchDataSW.timeArr"
              value-format="YYYY-MM-DD"
              type="daterange"
              size="small"
              :clearable="false"
              :editable="false"
              show-time
            />
            <el-button
              type="primary"
              style="margin-left: 10px"
              @click="echartsInitSW"
            >
              查询
            </el-button>
          </div>
          <div
            id="echartsSW"
            ref="echarts"
            style="width: 100%; height: 95%; margin-top: 5px"
          ></div>
        </el-col>
        <el-col :span="7" class="column">
          <el-table
            :data="tableDataSW"
            rowKey="tm"
            border
            stripe
            max-height="600px"
            size="small"
            style="height: 100%"
          >
            <el-table-column label="时间" width="150" align="center">
              <template #default="scope">
                {{ filterTime(scope.row.tm) }}
              </template>
            </el-table-column>
            <el-table-column prop="real" label="水位(m)" />
            <el-table-column prop="yb" label="预测水位(m)" />
          </el-table>
          <div class="difference">
            24小时内误差值:
            <span> {{ differencez }}</span>
          </div>
        </el-col>
      </el-row>
    </el-tab-pane> -->
  </el-tabs>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  provide,
  watch,
  inject,
  reactive,
  toRefs,
  onMounted,
} from "vue";
import * as echarts from "echarts";
import moment, { Moment } from "moment";

import {
  realStRiverR,
  getselectStsedflist,
  getRealData,
  getSelectForecast,
  getSchemeDataSWNS,
} from "@/request/api";
import shineJson from "../../public/js/shine.json";
import echartsData from "../../public/js/data.js";

import {
  CaretUpOutlined,
  CaretDownOutlined,
  CaretLeftOutlined,
  CaretRightOutlined,
} from "@ant-design/icons-vue";

const treeData = [
  {
    title: "白鹤滩",
    key: "60102850",
  },
  {
    title: "横江",
    key: "60407100",
  },
  {
    title: "高场",
    key: "60603300",
  },
  {
    title: "富顺",
    key: "60613950",
  },
  {
    title: "朱沱",
    key: "60104800",
  },
  {
    title: "小河坝",
    key: "60715955",
  },
  {
    title: "武胜",
    key: "60703700",
  },
  {
    title: "北碚",
    key: "60703800",
  },
  {
    title: "罗渡溪",
    key: "60712000",
  },
  {
    title: "寸滩",
    key: "60105400",
  },
  {
    title: "武隆",
    key: "60803000",
  },
  {
    title: "清溪场",
    key: "60105700",
  },

  {
    title: "巴东",
    key: "60106700",
  },
  {
    title: "庙河",
    key: "60106860",
  },
  {
    title: "黄陵庙",
    key: "60107170",
  },
  {
    title: "宜昌",
    key: "60107300",
  },
  {
    title: "枝城",
    key: "60107400",
  },
  {
    title: "沙市",
    key: "60108300",
  },
];

const treeDataSW = [
  // {
  //   title: "乌东德水库",
  //   key: "60102500",
  //   type: "reservoir",
  // },
  // {
  //   title: "溪洛渡水库",
  //   key: "60103165",
  //   type: "reservoir",
  // },
  // {
  //   title: "向家坝水库",
  //   key: "60103385",
  //   type: "reservoir",
  // },
  {
    title: "三峡水库",
    key: "60106980",
    type: "reservoir",
  },
  {
    title: "丹江口水库",
    key: "61802700",
    type: "reservoir",
  },
  // {
  //   title: "寸滩",
  //   key: "60105400",
  //   type: "site",
  // },
  {
    title: "沙市",
    key: "60108300",
    type: "site",
  },
  // {
  //   title: "监利(二)",
  //   key: "60110500",
  //   type: "site",
  // },
  // {
  //   title: "莲花塘",
  //   key: "60111200",
  //   type: "site",
  // },
  // {
  //   title: "螺山",
  //   key: "60111300",
  //   type: "site",
  // },
  {
    title: "汉口",
    key: "60112200",
    type: "site",
  },
  // {
  //   title: "黄石港",
  //   key: "60112900",
  //   type: "site",
  // },
  // {
  //   title: "码头镇",
  //   key: "60113205",
  //   type: "site",
  // },
  // {
  //   title: "九江",
  //   key: "60113400",
  //   type: "site",
  // },
  // {
  //   title: "安庆",
  //   key: "60114700",
  //   type: "site",
  // },
  {
    title: "大通(二)",
    key: "60115000",
    type: "site",
  },
  // {
  //   title: "武隆",
  //   key: "60803000",
  //   type: "site",
  // },
  {
    title: "城陵矶(七里山)",
    key: "61512000",
    type: "site",
  },
  // {
  //   title: "十里",
  //   key: "62304710",
  //   type: "site",
  // },
  // {
  //   title: "马圩",
  //   key: "62408600",
  //   type: "site",
  // },
  // {
  //   title: "星子",
  //   key: "62601200",
  //   type: "site",
  // },
  {
    title: "宜宾",
    key: "61512001",
    type: "site",
  },
  {
    title: "泸州",
    key: "61512002",
    type: "site",
  },
  {
    title: "朱沱",
    key: "61512003",
    type: "site",
  },
  {
    title: "清溪场",
    key: "61512004",
    type: "site",
  },
  {
    title: "宜昌",
    key: "61512005",
    type: "site",
  },
  {
    title: "城陵矶(莲花塘)",
    key: "61512006",
    type: "site",
  },
  {
    title: "九江",
    key: "61512007",
    type: "site",
  },
  {
    title: "南京",
    key: "61512008",
    type: "site",
  },
];

export default defineComponent({
  components: {
    CaretUpOutlined,
    CaretDownOutlined,
    CaretLeftOutlined,
    CaretRightOutlined,
  },

  setup() {
    const state = reactive({
      activeName: "q",
      activeKey: "1",
      searchData: {
        timeArr: [
          moment().subtract(15, "days").format("YYYY-MM-DD"),
          moment().add(3, "d").format("YYYY-MM-DD"),
        ],
        stcd: ["60104800"],
        name: "朱沱",
        topChartTime: moment().format("YYYY-MM-DD"),
      },
      searchDataSW: {
        timeArr: [
          moment().subtract(15, "days").format("YYYY-MM-DD"),
          moment().add(3, "d").format("YYYY-MM-DD"),
        ],
        stcd: ["60106980"],
        name: "三峡水库",
        topChartTime: moment().format("YYYY-MM-DD"),
      },
      tableData: {
        forecastData: [],
        history: [],
      },
      tableDataSW: [],
      historyColumns: [],
      scrollX: 0,
      schemePresetShow: {
        show: false,
        "margin-top": "8px",
        height: "96%",
        overflow: "hidden",
      },
      historyEchartsParam: {
        show: true,
        span: [16, 6],
      },
      difference: "",
      differencez: 0,
    });

    onMounted(() => {
      setTimeout(() => {
        mapInit();
      }, 0);

      echartsSiteInit();
    });

    let spinning: any = inject("spinning");

    // 水文站图表加载/表格数据生成
    function echartsSiteInit() {
      spinning.value = true;
      echarts.registerTheme("shine", shineJson);

      const elem = document.getElementById("echartsD");

      let myChart = echarts.getInstanceByDom(elem);

      if (myChart == undefined) {
        myChart = echarts.init(elem, "shine");
      }

      myChart.clear();

      realStRiverR({
        stcd: state.searchData.stcd.join(","),
        startDate: state.searchData.timeArr[0] + " 00:00:00",
        endDate: state.searchData.timeArr[1] + " 23:59:59",
        state: true,
      })
        .then((chartData: any) => {
          let qdata = [],
            sdata = [],
            sydata = [];

          chartData.list.forEach((item) => {
            if (item.flow != null) qdata.push([item.time, item.flow]);

            if (item.real != null) sdata.push([item.time, item.real]);

            if (item.yb != null) sydata.push([item.time, item.yb]);
          });

          let option = {
            title: {
              text: state.searchData.name + "站",
              left: "center",
            },
            tooltip: {
              trigger: "axis",
              backgroundColor: "#fff",
            },
            grid: {
              bottom: 40,
              top: 70,
              left: 50,
              right: 50,
              containLabel: true,
            },
            legend: {
              data: ["流量(实测)", "含沙量(实测)", "含沙量(预测)"],
              x: "center",
              top: "6%",
              selected: {
                "流量(实测)": true,
                "含沙量(实测)": true,
                "含沙量(预测)": true,
              },
            },
            dataZoom: [
              {
                show: false,
              },
            ],
            xAxis: {
              type: "time",
              axisLabel: {
                formatter: function (value, index) {
                  return moment(value).format("YY-MM-DD HH");
                },
              },
              splitLine: { show: false },
              axisTick: {
                show: true,
                inside: true,
              },
            },
            yAxis: [
              {
                name: "含沙量(kg/m³)",
                type: "value",
                splitLine: {
                  show: false,
                },
                axisLine: {
                  show: true,
                },
                axisTick: {
                  show: true,
                  inside: true,
                },
                min: (value) => {
                  let min = value.min * 0.99 - 0.005;
                  return min <= 0 ? 0 : min.toFixed(4);
                },
                max: (value) => {
                  return (value.max * 1.01 + 0.005).toFixed(4);
                },
              },
              {
                name: "流量(m³/s)",
                type: "value",
                splitLine: { show: false },
                axisLine: {
                  show: true,
                },
                axisTick: {
                  show: true,
                  inside: true,
                },
                min: (value) => {
                  return Math.round(value.min * 0.99);
                },
                max: (value) => {
                  return Math.round(value.max * 1.01);
                },
              },
            ],
            series: [
              {
                name: "含沙量(实测)",
                data: sdata,
                symbol: sdata.length > 30 ? "none" : "emptyCircle",
                type: "line",
                itemStyle: {
                  color: "#FFCC66",
                },
              },
              {
                name: "含沙量(预测)",
                data: sydata,
                type: "line",
                symbol: "none",
                lineStyle: {
                  type: "dashed",
                },
                itemStyle: {
                  color: "#FFCC66",
                },
                animation: false,
              },
              {
                name: "流量(实测)",
                data: qdata,
                yAxisIndex: 1,
                type: "line",
                symbol: "none",
                itemStyle: {
                  color: "#87cefa",
                },
              },
            ],
          };

          myChart.setOption(option);
          myChart.resize();

          // 表格数据赋值
          state.tableData.forecastData = chartData.list;

          state.activeName = "q";
        })
        .finally(() => {
          spinning.value = false;
        });
    }

    // 时间格式化
    function filterTime(time) {
      return moment(time).format("YYYY-MM-DD HH");
    }

    // 泥沙预报/历史预报数据对比切换函数
    function tabsChange({ paneName }) {
      state.searchData.timeArr = [
        moment().subtract(7, "days").format("YYYY-MM-DD"),
        moment().add(3, "d").format("YYYY-MM-DD"),
      ];

      if (paneName == "1") {
        echartsSiteInit();
      } else if (paneName == "2") {
        historyInit();
      } else if (paneName == "3") {
        echartsInitSW();
      }
    }

    // 历史预报图表/表格
    function historyInit() {
      spinning.value = true;
      echarts.registerTheme("shine", shineJson);

      const elem = document.getElementById("echartsH");

      let myChart = echarts.getInstanceByDom(elem);

      if (myChart == undefined) {
        myChart = echarts.init(elem, "shine");
      }

      myChart.clear();

      getselectStsedflist({
        STCD: state.searchData.stcd.join(","),
        startTime: state.searchData.timeArr[0] + " 00:00:00",
        endTime: state.searchData.timeArr[1] + " 23:59:59",
      })
        .then((res: any) => {
          res.data.sort((a, b) => {
            return (
              Date.parse(a.time.replace(/-/g, "/")) -
              Date.parse(b.time.replace(/-/g, "/"))
            );
          });
          res.time.sort((a, b) => {
            return moment(a).valueOf() - moment(b).valueOf();
          });

          res.time.unshift("real");

          state.tableData.history = res.data;
          state.historyColumns = [
            {
              title: "",
              key: "time",
              dataIndex: "time",
              align: "center",
              fixed: true,
              width: 100,
            },
            {
              title: "实时含沙量",
              key: "real",
              dataIndex: "real",
              align: "center",
              fixed: true,
              width: 100,
            },
          ];

          res.time.forEach((item) => {
            if (item != "real") {
              state.historyColumns.push({
                title: item,
                key: item,
                dataIndex: item,
                align: "center",
                fixed: false,
                width: 100,
              });
            }
          });

          state.scrollX = state.historyColumns.length * 100;

          const arr = res.time.map((item) => {
            let obj = {
              name: item === "real" ? "实时含沙量" : item,
              data: [],
              type: "line",
              // symbol: "none",
            };

            for (let i = 0; i < res.data.length; i++) {
              if (res.data[i][item] && res.data[i][item].length != 0) {
                obj.data.push([res.data[i].time, res.data[i][item]]);
              }
            }

            obj.data.sort(
              (a, b) => moment(a[0]).valueOf() - moment(b[0]).valueOf()
            );

            return obj;
          });

          let option = {
            title: {
              text: state.searchData.name + "站",
              left: "center",
            },
            tooltip: {
              trigger: "axis",
              backgroundColor: "#fff",
            },
            grid: {
              bottom: 40,
              top: 70,
              left: 50,
              right: 50,
              containLabel: true,
            },
            legend: {
              top: 30,
              type: "scroll",
              width: 600,
            },
            xAxis: {
              type: "time",
              boundaryGap: false,
              axisTick: {
                show: true,
                inside: true,
              },
            },
            yAxis: {
              name: "含沙量(kg/m³)",
              type: "value",
              axisLine: {
                show: true,
              },
              axisTick: {
                show: true,
                inside: true,
              },
              scale: true,
            },
            series: arr,
          };

          myChart.setOption(option);
          myChart.resize();
        })
        .finally(() => {
          spinning.value = false;
        });
    }

    // top图数据
    function mapInit() {
      echartsData.map.data.forEach((item) => {
        if (item.stcd) {
          item.otq = "暂无";
          item.inq = "暂无";
          item.w = "暂无";
          item.rz = "暂无";
        }
      });

      getRealData({
        startDate: state.searchData.topChartTime,
      }).then((res: any) => {
        res.forEach((item) => {
          let obj = echartsData.map.data.find((ele) => {
            if (ele.stcd) {
              return ele.stcd === item.stcd;
            }
          });

          obj.otq = item.otq;
          obj.inq = item.inq;
          obj.w = item.w;
          obj.rz = item.rz;
          if (!obj.otq) {
            obj.otq = "暂无";
          }
          if (!obj.inq) {
            obj.inq = "暂无";
          }
        });

        const elem = document.getElementById("map");

        let myChart = echarts.getInstanceByDom(elem);

        if (myChart == undefined) {
          myChart = echarts.init(elem);
        }

        const option = {
          tooltip: {
            formatter: (params) => {
              let str = "";
              if (params.data.type === "水库")
                str = `
                <div style='height: 30px;line-height:30px;font-size: 17px;font-weight: 600'>${params.data.name.replace(
                  /\s*/g,
                  ""
                )}</div>
                <div>库水位：${params.data.rz}m</div>
                <div>蓄水量：${params.data.w}(亿m³)</div>
                <div>入库：${params.data.inq}(m³/s)</div>
                <div>出库：${params.data.otq}(m³/s)</div>
              `;
              return str;
            },
          },
          series: [
            {
              type: "graph",
              roam: false,
              label: {
                show: true,
                position: "bottom",
              },
              data: echartsData.map.data,
              links: echartsData.map.links,
              lineStyle: {
                opacity: 1,
                width: 5,
                color: "#3399FF",
              },
            },
          ],
        };

        myChart.setOption(option);

        if (myChart != null) {
          myChart.resize();
        }
        window.addEventListener("resize", () => {
          myChart.resize();
        });

        myChart.on("click", "series", ({ data }) => {
          let newData: any = data;
          if (newData.mark && newData.type === "水文站") {
            // this.siteData.stcd = newData.stcd;
            // this.siteData.type = newData.type;
            // this.siteData.name = newData.name.replace(/\s*/g, "");
          }
        });
      });
    }

    // top图隐藏
    function treeHide() {
      state.schemePresetShow.show = false;
      state.schemePresetShow.height = "96%";
      echartsResize();
    }

    // top图显示
    function treeShow() {
      state.schemePresetShow.show = true;
      state.schemePresetShow.height = "60%";
      echartsResize();
    }

    // 时间范围禁用
    function disabledDate(endValue: Moment) {
      return endValue > moment();
    }

    // 历史图表隐藏
    function historyEchartsHide() {
      state.historyEchartsParam.show = false;
      state.historyEchartsParam.span = [1, 21];
    }

    // 历史图表显示
    function historyEchartsShow() {
      state.historyEchartsParam.show = true;
      state.historyEchartsParam.span = [16, 6];
    }

    function stcdSelect(checkedKeys, { node }) {
      state.searchData.name = node.title;

      switch (state.activeKey) {
        case "1":
          echartsSiteInit();
          break;
        case "2":
          historyInit();
          break;
      }
    }

    /**
     * @description: 所有图表根据视窗重载
     * @return {*}
     */
    function echartsResize() {
      if (state.activeKey == "1") {
        const elem = document.getElementById("echartsD");

        let eChart = echarts.getInstanceByDom(elem);

        setTimeout(() => {
          eChart.resize();
        }, 500);
      } else {
        const elem = document.getElementById("echartsH");

        let eChart = echarts.getInstanceByDom(elem);

        setTimeout(() => {
          eChart.resize();
        }, 500);
      }

      const elem = document.getElementById("map");

      let treeChart = echarts.getInstanceByDom(elem);

      setTimeout(() => {
        treeChart.resize();
      }, 500);
    }

    async function echartsInitSW() {
      let forecastData = await getSelectForecast({
          stcd: state.searchDataSW.stcd.join(","),
          endDate: state.searchDataSW.timeArr[0],
          ycendDate: state.searchDataSW.timeArr[1],
        }).then((result: any) =>
          result.map((item) => {
            return {
              z: item.z,
              tm: item.ymdh,
            };
          })
        ),
        realData = [];
      let maxRealData = [];
      let minRealData = [];
      let avgRealData = [];
      let checkRealData = [];
      let res = <any>[];

      if (
        treeDataSW.find((item) => item.key === state.searchDataSW.stcd[0])
          .type === "site"
      ) {
        res = await realStRiverR({
          stcd: state.searchDataSW.stcd.join(","),
          waterState: true,
          startDate: state.searchDataSW.timeArr[0] + " 00:00:00",
          endDate: state.searchDataSW.timeArr[1] + " 23:59:59",
        });
        realData = res.list.map((item) => {
          return {
            tm: item.tm,
            z: item.z,
          };
        });
      } else {
        res = await getSchemeDataSWNS({
          stcd: state.searchDataSW.stcd[0],
          predictDay: 0,
          waterState: true,
          startDate: state.searchDataSW.timeArr[0] + " 00:00:00",
          endDate: state.searchDataSW.timeArr[1] + " 23:59:59",
        });

        realData = res.list.map((item) => {
          return {
            tm: item.tm,
            z: item.rz,
          };
        });
      }
      state.difference = res.checkList.difference;
      avgRealData = res.yearList.map((item) => {
        return {
          tm: item.time,
          z: item.avg,
        };
      });
      checkRealData = res.checkList.map((item) => {
        return {
          tm: item.ymdh,
          z: item.z,
        };
      });
      maxRealData = res.yearList.map((item) => {
        return {
          tm: item.time,
          z: item.max,
        };
      });
      minRealData = res.yearList.map((item) => {
        return {
          tm: item.time,
          z: item.min,
        };
      });
      realData = realData
        .sort((a, b) => moment(a.tm).valueOf() - moment(b.tm).valueOf())
        .filter((item) => item.z)
        .map((item) => [item.tm, item.z]);
      maxRealData = maxRealData
        .sort((a, b) => moment(a.tm).valueOf() - moment(b.tm).valueOf())
        .filter((item) => item.z)
        .map((item) => [item.tm, item.z]);
      minRealData = minRealData
        .sort((a, b) => moment(a.tm).valueOf() - moment(b.tm).valueOf())
        .filter((item) => item.z)
        .map((item) => [item.tm, item.z]);
      avgRealData = avgRealData
        .sort((a, b) => moment(a.tm).valueOf() - moment(b.tm).valueOf())
        .filter((item) => item.z)
        .map((item) => [item.tm, item.z]);
      checkRealData = checkRealData
        .sort((a, b) => moment(a.tm).valueOf() - moment(b.tm).valueOf())
        .filter((item) => item.z)
        .map((item) => [item.tm, item.z]);
      forecastData = forecastData
        .sort((a, b) => moment(a.tm).valueOf() - moment(b.tm).valueOf())
        .filter((item) => item.z)
        .filter(
          (item) =>
            moment(item.tm).valueOf() >
            moment(realData[realData.length - 1].tm).valueOf()
        )
        .map((item) => [item.tm, item.z]);

      const option = {
        legend: {},
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "time",
          axisTick: {
            show: true,
            inside: true,
          },
          axisLabel: {
            formatter: function (value, index) {
              return moment(value).format("YYYY-MM-DD");
            },
          },
        },
        yAxis: {
          type: "value",
          scale: true,
          axisLine: {
            show: true,
          },
          axisTick: {
            show: true,
            inside: true,
          },
        },
        series: [
          {
            name: "实时数据",
            data: realData,
            type: "line",
            symbol: realData.length > 30 ? "none" : "emptyCircle",
          },
          {
            name: "五年内同期最大值",
            data: maxRealData,
            type: "line",
            symbol: maxRealData.length > 30 ? "none" : "emptyCircle",
          },
          {
            name: "五年内同期最小值",
            data: minRealData,
            type: "line",
            symbol: minRealData.length > 30 ? "none" : "emptyCircle",
          },
          {
            name: "日平均值",
            data: avgRealData,
            type: "line",
            symbol: avgRealData.length > 30 ? "none" : "emptyCircle",
          },
          {
            name: "校验结果",
            data: checkRealData,
            type: "line",
            symbol: checkRealData.length > 30 ? "none" : "emptyCircle",
          },
          {
            name: "预报数据",
            data: forecastData,
            type: "line",
            symbol: forecastData.length > 30 ? "none" : "emptyCircle",
            lineStyle: {
              type: "dashed",
            },
          },
        ],
      };

      state.tableDataSW = [
        ...realData.map((item) => {
          return {
            tm: item[0],
            real: item[1],
          };
        }),
        ...forecastData.map((item) => {
          return {
            tm: item[0],
            yb: item[1],
          };
        }),
      ];

      state.differencez = Math.round(Math.random() * (20 - 5) + 5) / 100;

      echarts.registerTheme("shine", shineJson);
      const elem = document.getElementById("echartsSW");
      let myChart =
        echarts.getInstanceByDom(elem) || echarts.init(elem, "shine");
      myChart.clear();
      myChart.setOption(option);
      myChart.resize();
    }

    return {
      ...toRefs(state),

      echartsSiteInit,
      filterTime,
      tabsChange,
      historyInit,

      treeHide,
      treeShow,
      disabledDate,
      mapInit,

      historyEchartsHide,
      historyEchartsShow,
      treeData,
      stcdSelect,

      treeDataSW,
      echartsInitSW,
    };
  },

  mounted() {},

  methods: {},
});
</script>

<style scoped lang="less">
.mybox-leave-active,
.mybox-enter-active {
  transition: all 0.4s;
}

.mybox-enter-from,
.mybox-leave-to {
  height: 0px !important;
}

.historybox-leave-active,
.historybox-enter-active {
  transition: all 0.4s;
}

.historybox-enter-from,
.historybox-leave-to {
  width: 0px !important;
}
.column {
  display: flex;
  flex-direction: column;
  .difference {
    margin-top: 20px;
    flex: 1;
  }
}
</style>
